<template>
  <div style="min-height:calc(100vh - 94px);background-color:#FFFFFF;overflow-y:auto;">
    <pheader style="border-bottom: 1px solid #dcdae2; ">
      <div v-if="checkType=='tool'" slot="left">工具基本信息</div>
      <div v-if="checkType=='resource'" slot="left">资源基本信息</div>
    </pheader>
    <template style="padding: 8px 8px 0px 8px;">
      <div style="width: 100%;background-color: white;overflow-y: auto;padding:10px;overflow-x: hidden;">
        <component v-if="checkType=='tool'" v-model="applyInfo" ref="toolBaseSet"  :is="'toolBaseSet'"></component>
        <component v-if="checkType=='resource'" v-model="applyInfo" :allResourceList="allServiceList" ref="resourceBaseSet"  :is="'resourceBaseSet'"></component>
      </div>
      <div style="border-bottom: 1px solid #dcdae2;">
        <Menu mode="horizontal" theme="light" active-name="1" @on-select="selectMenu">
<!--           <MenuItem name="1">
          <Icon type="ios-contact-outline" />
          账号配置
          </MenuItem> -->
          <MenuItem name="2" v-if="checkType=='tool' && applyInfo.spServiceType != 'openApiPlatform'">
          <Icon type="ios-cloud-done-outline" />
          套餐配置
          </MenuItem>
        </Menu>
      </div>
      <div style="padding-top: 2%">
<!--         <component v-show="menuName==1" v-model="account" :checkType="checkType" :isEdit="true" :isShow="false" :ifedit="false"
          ref="accountSet"  :is="'accountSet'"></component> -->
        <template v-if="checkType=='tool'">
          <component v-show="menuName==2" v-model="packageLists" :allServiceList="allServiceList" ref="resourceSet"
             :is="'resourceSet'"></component>
        </template>
      </div>
    </template>
  </div>
</template>

<script>
  import Axios from 'axios'
  import ajax from "../../../ajax_util"
  import pheader from "../../../comp_chatter/pheader"
  import resourceSet from "./resourceSet.vue"
  import accountSet from "./accountSet.vue"
  import toolBaseSet from "./toolBaseSet.vue"
  import resourceBaseSet from "./resourceBaseSet.vue"

  export default {
    components: {
      pheader,
      resourceSet,
      accountSet,
      toolBaseSet,
      resourceBaseSet,
    },
    data() {
      return {
        menuName: 2,
        account: []
      }
    },
    computed: {
      packageLists: {
        get: function() {
          return this.value;
        },
        set: function(value) {
          this.$emit('input', value);
        }
      }
    },
    mounted() {
      console.log("===6666666666===applyInfo=======", this.applyInfo, this.toolResourcetInfo,this.allServiceList);
    },
    methods: {
      selectMenu(name) {
        console.log("-------selectMenu------", name);
        this.menuName = name;
      },
      getAccount() {
        console.log("------getAccount---------", this.account);
        return this.account;
      },
      validate() {
        if (this.checkType == "resource") {
          var valid = this.$refs.resourceBaseSet.validate();
          console.log("-------valid22------", this.$refs.resourceBaseSet.validate());
          return valid;
        }

        if (this.checkType == "tool") {
          var valid = this.$refs.toolBaseSet.validate();
          console.log("-------valid------", valid);
          return valid;
        }
      },
      // checkData() {
      //   var valid = this.$refs.accountSet.validate();
      //   console.log("-----checkData-------", valid);
      //   return valid;
      // }
    },
    props: {
      value: {},
      data: {},
      applyInfo: {},
      allServiceList: {},
      checkType: {}
    },
    watch: {
      applyInfo(val) {
        console.log("=======toolServiceList=========", val);
        this.applyInfo = val;
      },
      allServiceList(val) {
        console.log("=======allServiceList=========", val);
        this.allServiceList = val;
      },
      checkType(val) {
        this.checkType = val;
      }
    }
  }
</script>

<style>

</style>
